feat(2403): wire up learn page by ycanales · Pull Request #2446 · boostorg/website-v2

ycanales · 2026-05-16T02:52:05Z

Issue: #2403

Summary & Context

Figma link: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=1849-49685&t=Ro4EGqvMYPtYaHRb-4
Link to components/page:
- http://localhost:8000/learn/
- http://localhost:8000/v3/demo/learn-page/

Changes

Uses get_latest_post_cards
Adds Category.short_description: field, migration and Waftail snippet.
Randomised category-card builder in LearnPageView
Link it to the "Learn" in navbar.

‼️ Risks & Considerations ‼️

The "Libraries categories" carousel stepper buttons don't work without JS. The approach taken with the Testimonials component wouldn't work here, as it only works cause it shows one item at a time, no scrolling supported. Since you can just scroll, I would hide the stepper buttons if JS is not available.
Implement Entry-Library relationship for library tags?

Fill some category descriptions to visualize them in the cards:

Screenshots

Self-review Checklist

Tag at least one team member from each team to review this PR
Link this PR to the related GitHub Project ticket

Frontend

UI implementation matches Figma design
Tested in light and dark mode
Responsive / mobile verified
Accessibility checked (keyboard navigation, etc.)
Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
Test without JavaScript (if applicable)
No console errors or warnings

herzog0

Hey Cristian, all good from my end, just a couple of comments that you should be aware of!

herzog0 · 2026-05-19T15:14:01Z

+                        kwargs={
+                            "version_slug": LATEST_RELEASE_URL_PATH_STR,
+                            "library_view_str": "categorized",
+                            "category_slug": category.slug,


I don't think this is doing anything currently. We should probably create a follow-up ticket to wire this up correctly to what @julhoang did in her pr #2420

If @julhoang's PR merges first I could adjust it here, or in a follow-up ticket, whatever's best 👍

herzog0 · 2026-05-19T16:02:35Z

      <div class="item-a">
        {% with data=post_cards_data %}
-          {% include 'v3/includes/_post_cards_v3.html' with heading=data.heading posts=data.posts view_all_url=data.view_all_url view_all_label=data.view_all_label theme='teal' variant="content-card" %}
+          {% include 'v3/includes/_post_card.html' with heading=data.heading items=data.posts variant="card" theme="teal" layout="vertical" primary_cta_label=data.view_all_label primary_cta_url=data.view_all_url %}


Just a heads up that this will conflict with @jlchilders11's pr #2414.
In his PR he also fixes the designs of the boost community card, so QA must be aware that you're tackling this in your PR, if it moves to QA before Jeremy's one gets merged.

Thanks for the heads up, I noticed so I'm counting on it merging first and me rebasing over the last changes 👍

Adopts the _community_card.html component from PR #2414 for the 'Boost community' section of the Learn page (replacing _join_card.html), along with its supporting CSS rewrite (learn-page.css cleanup, new community-card.css) and the registration in components.css. Renames boost_community_data item 'url' -> 'cta_url' to match the new component's expected shape.

julhoang

Hi @ycanales ! Thank you for setting up the shared helper for querying the latest posts, and I love the handy Wagtail snippet for the categories too! Definitely makes it much easier to manage that content than clicking through that the admin panel – speaking of which, would you mind raising to Glauber & Rob that we need content support to populate the new description of the categories?

julhoang · 2026-05-22T00:06:06Z

        ctx["learn_card_data"] = [
            {
                "title": "I want to learn:",
-                "text": "How to install Boost, use its libraries, build projects, and get help when you need it.",
+                "text": (
+                    "How to install Boost, use its libraries, build projects, "
+                    "and get help when you need it."
+                ),
                "links": [
                    {
                        "label": "Explore common use cases",
-                        "url": "https://www.example.com",
+                        "url": "https://www.boost.org/doc/user-guide/common-introduction.html",
+                    },
+                    {
+                        "label": "Build with CMake",
+                        "url": "https://www.boost.org/doc/user-guide/building-with-cmake.html",
+                    },
+                    {
+                        "label": "Visit the FAQ",
+                        "url": "https://www.boost.org/doc/user-guide/faq.html",
                    },
-                    {"label": "Build with CMake", "url": "https://www.example.com"},
-                    {"label": "Visit the FAQ", "url": "https://www.example.com"},
                ],
-                "url": "https://www.example.com",
-                "label": "Learn more about Boost",
+                "url": "https://www.boost.org/doc/user-guide/getting-started.html",
+                "label": "Get started with Boost",
                "image_src": large_static("/img/v3/learn-page/learn-cheetah.png"),
                "mobile_image_src": large_static(
                    "/img/v3/learn-page/cheetah-mobile.png"
                ),
            },
            {
-                "title": "I want to learn:",
-                "text": "How to install Boost, use its libraries, build projects, and get help when you need it.",
+                "title": "I want to contribute:",
+                "text": (
+                    "How to contribute to Boost, propose new libraries, "
+                    "and engage in formal reviews."
+                ),
                "links": [
                    {
-                        "label": "Explore common use cases",
-                        "url": "https://www.example.com",
+                        "label": "Contribute to an existing library",
+                        "url": "https://www.boost.org/doc/contributor-guide/contributors-faq.html",
+                    },
+                    {
+                        "label": "Learn about formal reviews",
+                        "url": "https://www.boost.org/doc/formal-reviews/submissions.html",
+                    },
+                    {
+                        "label": "Visit the Contributors FAQ",
+                        "url": "https://www.boost.org/doc/contributor-guide/contributors-faq.html",
                    },
-                    {"label": "Build with CMake", "url": "https://www.example.com"},
-                    {"label": "Visit the FAQ", "url": "https://www.example.com"},
                ],
-                "url": "https://www.example.com",
-                "label": "Learn more about Boost",
-                "image_src": large_static("img/v3/learn-page/learn-octopus.png"),
+                "url": "https://www.boost.org/doc/contributor-guide/requirements/library-requirements.html",
+                "label": "Propose a new library",
+                "image_src": large_static("/img/v3/learn-page/learn-octopus.png"),
                "mobile_image_src": large_static(
                    "/img/v3/learn-page/octopus-mobile.png"
                ),
            },
        ]


All of these data are static – can we consider having the page HTML template hardcode these instead of serving these through context? 🤔 I think it'd be better to have the BE just provide dynamic data. Please consider updating the other ctx as well (e.g. ctx["why_boost_cards"], ctx["info_card"], ctx["boost_community_data"] , etc)

julhoang · 2026-05-22T00:07:07Z

+        # Copy mirrors the Figma frame at node 1849:49695. The design currently
+        # has two cards titled "Modern approach to C++" — flagged to design.


Can we follow up with design and remove this comment from code? 🙏

julhoang · 2026-05-22T00:16:48Z

+        Entry.objects.published()
+        .select_related("author")
+        .order_by("-publish_at")[:limit]


Would you mind adding .filter(deleted_at__isnull=True) here to filter out non-deleted post here?

julhoang · 2026-05-22T00:28:06Z

+            Category.objects.annotate(library_count=Count("libraries", distinct=True))
+            .filter(library_count__gt=0)
+            .only("name", "slug", "short_description")


Can we filter out category where name = null here too? I've just noticed there are a few libraries that are not categorized!

Nice catch! Adjusted.

julhoang · 2026-05-22T00:35:40Z

+                author.get_avatar_url() if hasattr(author, "get_avatar_url") else ""
+            ),
+            "badge_url": None,
+            "show_badge": False,


hmm it seems like this show_badge isn't used anywhere and we probably don't need it at all – 🪓?

Totally right, adjusted, thanks!

julhoang · 2026-05-22T00:39:46Z

      <div class="item-b">
        {% with data=boost_community_data %}
-          {% include 'v3/includes/_community_card.html' with heading=data.heading items=data.posts primary_cta_url=data.view_all_url primary_cta_label=data.view_all_label %}
+          {% include 'v3/includes/_community_card.html' with heading=data.heading items=data.items variant="card" theme="default" layout="vertical" primary_cta_label=data.primary_cta_label primary_cta_url=data.primary_cta_url %}


This variant should be list and we can remove the theme and layout

Good catch, I've fixed it, thanks!

julhoang · 2026-05-22T00:43:02Z

                "links": [
                    {
                        "label": "Explore common use cases",
-                        "url": "https://www.example.com",
+                        "url": "https://www.boost.org/doc/user-guide/common-introduction.html",
+                    },
+                    {
+                        "label": "Build with CMake",
+                        "url": "https://www.boost.org/doc/user-guide/building-with-cmake.html",
+                    },
+                    {
+                        "label": "Visit the FAQ",
+                        "url": "https://www.boost.org/doc/user-guide/faq.html",
                    },
-                    {"label": "Build with CMake", "url": "https://www.example.com"},
-                    {"label": "Visit the FAQ", "url": "https://www.example.com"},
                ],
-                "url": "https://www.example.com",
-                "label": "Learn more about Boost",
+                "url": "https://www.boost.org/doc/user-guide/getting-started.html",


For these internal URLs, can we make these relative paths instead of hardcoded boost.org? Please update the other URLs on this page as well 🙏

Good catch, adjusted!

julhoang · 2026-05-22T00:57:43Z

+class CategorySnippetViewSet(SnippetViewSet):
+    model = Category
+    menu_label = "Library Categories"
+    icon = "tag"
+    list_display = ["name", "short_description"]
+    search_fields = ["name", "short_description"]
+    panels = [
+        FieldPanel("name"),
+        FieldPanel("slug"),
+        FieldPanel("short_description"),
+    ]
+
+
+register_snippet(CategorySnippetViewSet)


Very neat!!

jlchilders11

Just a general comment: This is built with the assumption that we are using Entry models, per our earlier discussion could we stub out logic for handling wagtail pages as well?

jlchilders11 · 2026-05-22T18:24:38Z

+    icon = "tag"
+    list_display = ["name", "short_description"]
+    search_fields = ["name", "short_description"]
+    panels = [


Just a note when defining panels, if you are using a FieldPanel with no customization you can also just enter the field name as a string and Wagtail will figure it out.

So you could instead have

panels = [ "name", "slug", "short_description" ]

feat(2403): wire up learn page

2fff9df

ycanales requested review from herzog0 and jlchilders11 May 18, 2026 17:20

ycanales linked an issue May 18, 2026 that may be closed by this pull request

Webpage Integration: Learn #2403

Open

herzog0 approved these changes May 20, 2026

View reviewed changes

jlchilders11 and others added 11 commits May 20, 2026 16:11

Bug: Learn Page correct post card and community card display issues

4b41b69

Update community card inputs

4572f92

PR feedback

68148fa

PR feedback

83f33ae

PR feedback: spacing adjustments

8c08a20

Correct inconsistent max width on mobile

0266f1b

QA feedback: update post cards arguments

9d73e8e

QA Feedback: Add icon to community card

dc6f00f

Merge branch 'develop' into cy/2403-learn-page

4a3ddc5

Merge branch 'develop' into cy/2403-learn-page

e8219c3

ycanales requested review from julhoang and julioest May 21, 2026 13:43

fix(2403): shorten buttons in mobile viewport as it is in figma

aa9ad5e

julhoang requested changes May 22, 2026

View reviewed changes

ycanales added 3 commits May 22, 2026 13:08

fix: relative URLs

621581f

fix: adjust params (community_card and Entry's show_badge)

358970e

fix: Exclude categories without name

a3aaa28

jlchilders11 approved these changes May 22, 2026

View reviewed changes

julioest approved these changes May 22, 2026

View reviewed changes

		# Copy mirrors the Figma frame at node 1849:49695. The design currently
		# has two cards titled "Modern approach to C++" — flagged to design.

Conversation

ycanales commented May 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue: #2403

Summary & Context

Changes

‼️ Risks & Considerations ‼️

Screenshots

Self-review Checklist

Frontend

Uh oh!

herzog0 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

julhoang left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jlchilders11 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ycanales commented May 16, 2026 •

edited

Loading